<template>
    <el-date-picker class="dateRangePicker" popper-class="eq-date-range-popper" v-model="searchForm[data['prop']]" :type="dateType" unlink-panels range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" :shortcuts="shortcuts" :format="dateFormat" :valueFormat="dateFormat"/>
</template>

<script setup>
import { ref, watch } from 'vue';

import { getMonthPickOptions, getDayPickOptions } from '@/utils/date';

const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    }
});

const shortcuts = ref(getDayPickOptions());
const dateFormat = ref('YYYY-MM-DD');
const dateType = ref('daterange');

const searchForm = defineModel('searchForm');

watch(() => searchForm.value.dateType, (type) => {
    if(type === '1'){
        shortcuts.value = getDayPickOptions();
        dateFormat.value = 'YYYY-MM-DD';
        dateType.value = 'daterange';
    }
    
    if(type === '2'){
        shortcuts.value = getMonthPickOptions();
        dateFormat.value = 'YYYY-MM';
        dateType.value = 'monthrange';
    }
});

</script>

<style lang="scss">
@import './DateRangePicker.scss';
</style>